<template lang="pug">
  .page
    .search-form.mb-10.pl-10.pr-10
      Row(type="flex" justify="start" v-if='hasFind')
        Col.pr-20.mb-15(span="7")
          span.label-txt.w110 数据权限组名称：
          Input(v-model="customerName" placeholder="请输入数据权限组名称" clearable)
          Button.ml-10(type="info" @click="searchBtn") 查询
    .pl-20.pr-20.bg-white
      Table.hasTitle-table.beautiful-table(width="100%" :loading="loading" stripe :columns="thead" :data="listData" @on-selection-change="tableSelectChange")
        .pr-24.pl-24(slot="header")
          .table-title-lefttxt.pull-left
            span
              |合计:
              span.text-info.pl-5.pr-5.font-weight {{codeTotal}}
              | 条
          .pull-right.table-title-btns
            Button.mr-15(type="info" v-if='hasAdd' @click="handleEditDetailModal(null)") 新增数据权限组
        template(slot-scope="{ row, index }" slot="action")
            Button.mr-10(type="text" size="small" v-if='hasUpdate' @click="handleEditDetailModal(row.id)") 编辑
            Button.mr-10(type="text" size="small" v-if="!row.enabled && hasEnabled" @click="enabledList(row.id, !row.enabled)") 启用
            Button.mr-10(type="text" size="small" v-if="row.enabled && hasDisEnabled" @click="enabledList(row.id, !row.enabled)") 禁用
        .clearfix.pl-20.pr-20(slot="footer")
          Page(:total="codeTotal" :current="PageIndex" :page-size="PageSize" prev-text="上一页" next-text="下一页" @on-change="pageChangeFn" show-total @on-page-size-change="onpageSizeChange" show-sizer :page-size-opts="[10, 20, 30, 50, 100]")

      //- 详情弹窗
      EditDetailModal(ref="EditDetailModal")
</template>

<script>
import filesManageApi from '@/api/filesManage.api.js'
import { SysDataPermissionGroupApi } from '@/api/SysDataPermissionGroup.api.js'
import dataApi from '@/api/data.js'
import config from '@/config'
import EditDetailModal from './modal/EditDetailModal.vue'
import { constants } from 'fs';
const baseUrl = process.env.NODE_ENV === 'development' ? config.baseUrl.dev : config.baseUrl.pro

export default {
  name: 'authorityGroup',
  components: {
    EditDetailModal
  },
  data () {
    return {
      uploadBaseUrl: baseUrl,
      thead: [
        {
          title: '数组权限组名称',
          minWidth: 100,
          key: 'name'
        },
        {
          title: '状态',
          minWidth: 100,
          key: 'name',
          render: (h, params) => {
            console.log(params,'params')
            const text = params.row.enabled ? '启用' : '禁用'
            return h('span', text)
          }
        },
        {
          title: '操作',
          minWidth: 100,
          slot: 'action'
        }
      ],
      serverId_arr: [],
      listData: [],
      serverID: '', // 身份证号码
      customerName: '', // 公司名称
      idArr: [],
      loading: false,
      PageIndex: 1,
      PageSize: 10,
      codeTotal: 0
    }
  },
  // mixins: [Mixin, theadMixin],
  computed: {
    actionArr () {
      let arr = this.$store.state.user.actionAccess.map(item => {
        return item.code
      })
      return arr
    },
    // 查询
    hasFind () {
      return this.actionArr.indexOf('Find') > -1
    },
    // 查看
    hasView () {
      return this.actionArr.indexOf('View') > -1
    },
    // 新增
    hasAdd () {
      return this.actionArr.indexOf('Add') > -1
    },
    // 编辑
    hasUpdate () {
      return this.actionArr.indexOf('Update') > -1
    },
    // 启用
    hasEnabled () {
      return this.actionArr.indexOf('Enabled') > -1
    },
    // 禁用
    hasDisEnabled () {
      return this.actionArr.indexOf('DisEnabled') > -1
    },
    // 删除
    hasDelete () {
      return this.actionArr.indexOf('Delete') > -1
    }
  },
  created () {
    this.getList()
  },
  methods: {
    // 获取客户列表
    getList () {
      this.loading = true
      SysDataPermissionGroupApi.getList({
        Name: this.customerName,
        PageIndex: this.PageIndex,
        PageSize: this.PageSize
      }).then(res => {
        this.loading = false
        if (res.data.success) {
          this.listData = res.data.data
          this.codeTotal = res.data.totalRows
        } else {
          this.$Message.error({
            content: res.data.message,
            duration: 10,
            closable: true
          })
        }
      })
    },

    // 新增/编辑弹窗
    handleEditDetailModal (id) {
      console.log(id,'新增/编辑弹窗')
      this.$refs.EditDetailModal.formData.name = ''
      this.$refs.EditDetailModal.isEditDetailModal = true
      this.$refs.EditDetailModal.formData.enabled = true
      this.$refs.EditDetailModal.treeCheckList = undefined
      this.$refs.EditDetailModal.id = id
      this.$refs.EditDetailModal.getModel()
    },

     // 启用/禁用
    async enabledList (id, enabled) {
      var params = {
        ids: id,
        enabled: enabled
      }
      let res = await SysDataPermissionGroupApi.enabledList(params)
      if (res.status === 200 && res.data.success) {
        this.$Message.success(res.data.message)
        this.getList()
      } else {
        this.$Message.error({
          content: res.data.message,
          duration: 10,
          closable: true
        })
      }
    },
    
    // 查询
    searchBtn () {
      this.PageIndex = 1
      this.getList()
    },
    tableSelectChange (val) {
      this.idArr = val.map(item => {
        return item.id
      })
    },
    pageChangeFn (val) {
      this.PageIndex = val
      this.getList()
    },
    onpageSizeChange (val) {
      this.PageSize = val
      this.getList()
    }
  }
}
</script>

<style>

</style>
